<template>
	<view :style="{'--color':color}">
		<status-bar title='添加银行卡'></status-bar>
		<view class="viewbox auto">
			<picker mode="selector" :range="bank" @change="bankSelect">
				<view class="list bot">
					<text class="title">选择银行</text>
					<view class="flex-1 height d-flex j-sb a-center">
						<text class="size26" :class="bankName?'color_33':'color_99'">{{bankName?bankName:'请选择银行'}}</text>
						<view class="iconfont icon-a-zujian32 color_cc h6"></view>
					</view>
				</view>
			</picker>
			<view class="list bot">
				<text class="title">开户支行</text>
				<input type="text" class="flex-1 height color_33 size26" 
				     v-model="branchBank"
				    placeholder="输入开户支行" placeholder-class="play"/>
			</view>
			<view class="list bot">
				<text class="title">银行卡号</text>
				<input type="number"  v-model="bankCard" class="flex-1 height color_33 size26" placeholder="输入完整的银行卡号" placeholder-class="play"/>
			</view>
			<view class="list bot">
				<text class="title">持卡人姓名</text>
				<input type="text" v-model="userName" class="flex-1 height color_33 size26" placeholder="点击输入持卡人姓名" placeholder-class="play"/>
			</view>
			<view class="list bot">
				<text class="title">身份证号码</text>
				<input type="text" v-model="idNo" class="flex-1 height color_33 size26" placeholder="点击输入身份证号码" placeholder-class="play"/>
			</view>
			<view class="list bot">
				<text class="title">联系电话</text>
				<input type="number" v-model="phone" class="flex-1 height color_33 size26" placeholder="点击输入联系电话" placeholder-class="play"/>
			</view>
		</view>
		
		
		<view class="viewboxs auto d-flex j-sa a-center m-top50">
			  <view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
			  <view class="btns flexac config size26 white" @click="addBack">添加</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				bank:[
					'中国工商银行','中国建设银行','中国银行','交通银行','中国农业银行','招商银行',
					'邮政储蓄银行','光大银行','民生银行','平安银行','浦发银行','中信银行','兴业银行',
					'华夏银行','广发银行','重庆银行','重庆农村商业银行','北京银行','徽商银行'
					,'天津银行','深圳农村商业银行','上海银行','汉口银行','南京银行','宁波银行'
					,'龙江银行','北京农商银行','江苏银行','广州银行','浙商银行','杭州银行','上海农商银行'
					,'渤海银行','广州农村商业银行','青岛银行','成都银行','哈尔滨银行','吉林银行','大连银行'
					,'齐鲁银行','东莞银行','长沙银行','河北银行','东莞农村商业银行','郑州银行','包商银行'
				],
				bankName:'',
				branchBank:'',
				bankCard:'',
				userName:'',
				idNo:'',
				phone:'',
			}
		},
		methods: {
			addBack(){
				if(!this.bankName) return this.$Toast('请选择银行');
				if(!this.branchBank) return this.$Toast('请输入开户支行');
				if(!this.bankCard) return this.$Toast('请输入银行卡号');
				if(!this.userName) return this.$Toast('请输入持卡人姓名');
				// if(!this.idNo) return this.$Toast('请输入身份证号码');
				this.$http.post({
					url:'/singleSaleApi/addBankcard',
					data:{
						cash_method:1,
						userName:this.userName,
						bankName:this.bankName,
						bankCard:this.bankCard,
						branchBank:this.branchBank,
						idNo:this.idNo,
						phone:this.phone,
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					this.$Toast(res.msg,2)
				})
			},
			bankSelect(e){
				this.bankName = this.bank[e.detail.value];
			}
		},
		computed:{
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		width:100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		width:180rpx;
		color:#333;
		font-size:26rpx;
		
	}
	/deep/.play{
		color:#999;
	}
	.btns{
		width: 258rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}
	.config{
		background-color: var(--color);
	}
</style>
